<template>
    <div>
        <div class="header">
            <h3>{{projectcontent.examName}}-{{ $route.query.examName }}</h3>
            <span>模板管理</span>
            <p>
                <b @click="toggleFullscreen"><img src="../../assets/images/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
                <em @click="$router.push('/templatemanagement')">退出</em>
            </p>
        </div>
        <div class="tabNav">
            <div class="searchlist">
                 <!-- :to="'/subjectivequestions?templateId='+ $route.query.templateId" -->
                <span @click="activeTab('/uploadhorizontalpositioning/index')" :class="{ hover: isActive('/uploadhorizontalpositioning/index','/horizontalpositioning') }">上传&水平定位</span>
                <span @click="activeTab('/basicinformation')" :class="{ hover: isActive('/basicinformation') }">基础信息</span>
                <span @click="activeTab('/objectivequestionarea')" :class="{ hover: isActive('/objectivequestionarea') }">客观题区</span>
                <span @click="activeTab('/subjectivequestions')" :class="{ hover: isActive('/subjectivequestions') }">主观题区</span>
            </div>
            <div class="buttoncontent" v-if="examStatus==0">
                <span v-if="imgarrayJk&&imgarrayJk.length==0" style="color:#999999"><img src="../../assets/images/zdsb.png" alt="" class="grayscale">自动识别</span>
                <span @click="annoatentauto" v-else><img src="../../assets/images/zdsb.png" alt="">自动识别</span>
                <span style="color:#999999"v-if="imgarrayJk&&imgarrayJk.length==0"><img src="../../assets/images/empty.png" alt=""  class="grayscale">一键清空</span>
                <span @click="cleardata" v-else style="color:#EC555A" ><img src="../../assets/images/empty.png" alt="">一键清空</span>
                <!-- <span><img src="../../assets/images/zc.png">暂存</span> -->
                <span @click="successModelZz" v-if="!isActive('/uploadhorizontalpositioning/index')"><img src="../../assets/images/copy.png">完成模板制作</span>
            </div>
        </div>

    </div>
</template>

<script>
import {getautoannotateDate,clearModeldata,autoAnnotateStatus,templateComplete} from '@/api/paperinfo/paperinfo.js'
export default {
    props:['imgarrayJk','examStatus'],
    data() {
        return {
            isFullscreen: 0,
            fullscreenLoading: false,
            pollTimer: null,  // 存储定时器ID
            pollInterval: 5000, // 轮询间隔5秒
            projectcontent:{},
            autoType:false,
            fullscreenLoading: false,
            serveloading:true,
            loading: null,  // Add this
        }
    },
    mounted() {
        this.$store.dispatch("getXmxx").then((res) => {
        console.info('res',res)
            this.projectcontent = res;
        });
        if(sessionStorage.getItem('autoType') == 1){
            this.getAutoStatusType()
        }
    },
    methods: {
        activeTab(url){
            if(this.imgarrayJk&&this.imgarrayJk.length===0){
                this.$message.warning('请先去调整水平位置');
                return
            }else{
                this.$router.push(url+'?templateId='+this.$route.query.templateId+'&examName='+this.$route.query.examName+'&examId='+this.$route.query.examId)
            }
        
        },
        //完成模板制作
        successModelZz(){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let obj = {
                examTemplateId:this.$route.query.templateId
            }
            templateComplete(obj).then(res=>{
                if(res.code == 200){
                    loading.close();
                    this.$message({
                        message: '模板制作完成',
                        type:'success'
                    })
                }
            })
        },
        // 定时5秒刷新
        getAutoStatusType() {
            let obj = {
            templateId: this.$route.query.templateId,
            }
            
            autoAnnotateStatus(obj).then(res => {
            if(res.code == 200) {
                if(res.msg == 1) {
                // 继续轮询
                sessionStorage.setItem('autoType', 1)
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                
                this.pollTimer = setTimeout(() => {
                    this.getAutoStatusType()
                }, this.pollInterval)
                } else {
                    this.$emit('autotypeDate','')
                    if (this.loading) {
                        this.loading.close()
                    }
                    sessionStorage.setItem('autoType', 2)
                    this.clearPolling()
                }
            }
            }).catch(err => {
            if (this.loading) {
                this.loading.close()
            }
            this.clearPolling()
            console.error('轮询出错:', err)
            })
        },
        clearPolling() {
            if (this.pollTimer) {
            clearTimeout(this.pollTimer)
            this.pollTimer = null
            }
        },
        //自动识别
        annoatentauto(){
            console.info(this.imgarrayJk,'imgarrayJk')
           this.serveloading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            sessionStorage.setItem('autoType',1)
            let obj={
                templateId:this.$route.query.templateId,
            }
            getautoannotateDate(obj).then(res=>{
                if(res.code==200){
                    // 开始轮询
                    this.getAutoStatusType()
                }
            })
        },
        isActive(...routes) {
            // 如果传入的是一个路径数组，检查当前路径是否在数组中
            if (Array.isArray(routes[0])) {
                return routes[0].some(route => this.$route.path.startsWith(route));
            }
            // 如果传入的是单个路径，直接检查是否匹配
            return routes.some(route => this.$route.path.startsWith(route));
        },
        //清空模板clearModeldata
        cleardata(){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let obj={
                    examTemplateId:this.$route.query.templateId,
                }
                clearModeldata(obj).then(res=>{
                    if(res.code==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$emit('clearData',1)
                    }
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        // 切换全屏
        toggleFullscreen() {
            if (!document.fullscreenEnabled) {
                alert("您的浏览器不支持全屏功能！");
                return;
            }
            
            if (this.isFullscreen) {
                // 退出全屏
                document.exitFullscreen();
                this.$refs.fullscreenElement.style.overflow = 'auto';
            } else {
                // 进入全屏
                this.$refs.fullscreenElement.requestFullscreen();
                this.$refs.fullscreenElement.style.overflow = 'auto';
            }
        },
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        this.clearPolling()
    }
}
</script>

<style scoped>
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#1A48DB;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#1A48DB;
	text-align: center;
	line-height:32px;
	cursor:pointer;
    font-style: normal;
}
.tabNav{
	padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.searchlist{
  	box-sizing: border-box;
  	width:auto;
  	display: flex;
  	justify-content: space-between;
  	height: 54px;
  	background: #FFFFFF;
  	border-radius: 10px;
  	align-items: center;
  }
  .searchlist{
  	display: flex;
  	align-items: center;
  	justify-content: left;
  }
  .searchlist span{
  	display: block;
  	color:#557292;
  	font-size:14px;
  	/* width:100px; */
  	text-align: center;
  	position: relative;
  	line-height:52px;
	padding:0 15px;	
    cursor: pointer;
    font-weight: bold;
  }
  .searchlist span:hover,.searchlist span.hover{
  	color:#295CFF;
  }
  .searchlist span:hover::after,.searchlist span.hover::after{
  	content:'';
  	width: 24px;
  	height: 4px;
  	background: #295CFF;
  	border-radius: 2px;
  	position: absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom:0;
  }
  .buttoncontent{
    display: flex;
    align-items: center;
  }
  .buttoncontent span{
    display: flex;
    align-items: center;
    font-size:14px;
    color:#1A48DB;
    padding-left:15px;
    margin-right:15px;
    cursor: pointer;
    position: relative;
  }
  /* .buttoncontent span:last-child{
    color:#B3B8C2
  } */
  .buttoncontent span img{
    width:14px;
    height:14px;
    margin-right:6px;
  }
  .buttoncontent span::after{
    content: '';
    width:1px;
    height: 14px;
    background-color: #DEE1E7;
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
  }
  .buttoncontent span:first-child:after{
    background-color: #fff;
  }
  .grayscale {
    filter: grayscale(100%);
    /* 兼容性前缀 */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
</style>